<template>
  <div class="q-pa-md">
    <div class="q-gutter-md row">
      <t-select
        label="下拉选择"
        placeholder="提示语"
        filled
        v-model="model"
        emit-value
        map-options
        clearable
        :use-input="true"
        input-debounce="0"
        style="width: 250px"
        itemsDataSourceType="static"
        displayFiled="Name1"
        valueFiled="Code1"
        :staticItems="[
          { label: '1', value: '1' },
          { label: '2', value: '2' },
          { label: '3', value: '3' },
        ]"
        :listDataSource="[
          { label: '1', value: '1', Name1: 'name4', Code1: '4' },
          { label: '2', value: '2', Name1: 'name5', Code1: '5' },
          { label: '3', value: '3', Name1: 'name6', Code1: '6' },
        ]"
        :options="[
          { label: '11', value: '11' },
          { label: '22', value: '22' },
          { label: '33', value: '33' },
        ]"
      >
        <template v-slot:no-option>
          <t-item>
            <t-item-section class="text-grey"> No results </t-item-section>
          </t-item>
        </template>
      </t-select>

      <!-- <t-select
        filled
        v-model="model"
        emit-value
        map-options
        use-input
        hide-selected
        fill-input
        input-debounce="0"
        :options="options"
        @filter="filterFn"
        hint="Basic filtering"
        style="width: 250px; padding-bottom: 32px"
      >
        <template v-slot:no-option>
          <t-item>
            <t-item-section class="text-grey"> No results </t-item-section>
          </t-item>
        </template>
      </t-select> -->
    </div>
    <q-badge color="secondary" multi-line> Model: "{{ model }}" </q-badge>
  </div>
</template>

<script>
  import { ref } from 'vue';

  const stringOptions = ['Google', 'Facebook', 'Twitter', 'Apple', 'Oracle'];
  const objOptions = [
    {
      label: '谷歌',
      value: 'Google',
    },
    {
      label: '脸书',
      value: 'Facebook',
    },
    {
      label: '推特',
      value: 'Twitter',
    },
    {
      label: '苹果',
      value: 'Apple',
    },
  ];

  export default {
    setup() {
      const options = ref(objOptions);

      return {
        model: ref(null),
        options,

        filterFn(val, update, abort) {
          debugger;
          update(() => {
            const needle = val.toLowerCase();
            options.value = objOptions.filter(
              v => v.label.toLowerCase().indexOf(needle) > -1,
            );
          });
        },
      };
    },
  };
</script>
